<template>
  <div class="chooselist">
    <div class="list">
      <h1>请选择聊天对象</h1>
      <div class="item" @click="chooseEvent(item)" v-for="(item, index) in chooseuser" :key="index">
        <img :src="item.avator" />
        <span>{{ item.username }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import socket from '../socket'
export default {
  props: ["chooseuser"],
  methods: {
      chooseEvent: function(user){
        //讲选择对象保存到本地
         this.$root.me = user
         localStorage.chatme = JSON.stringify(user)
         console.log(socket)
         socket.emit('login',user)
      }
  },
};
</script>

<style scoped>
.chooselist {
  width: 100vw;
  height: 100vh;
  background-color: lightblue;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
h1 {
  text-align: center;
  height: 20vw;
  width: 100vw;
  line-height: 100px;
}
.item {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  height: 40vh;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
</style>